'use client'

import Image from 'next/image'
import { Button } from '@/components/ui/button'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useEffect, useState, Suspense } from 'react'
import { useSearchParams, useRouter } from 'next/navigation'
import { useAuthStore } from '@/stores/auth'
import { loginList, isDev } from '@/assets/static'

// 创建一个包含 useSearchParams 的组件
function SearchParamsHandler() {
  const searchParams = useSearchParams()
  useEffect(() => {
    const token = searchParams.get('token')
    if (token) {
      useAuthStore.getState().setAuth(token, null)
      location.replace('/movie')
    }
  }, [searchParams])

  return null
}

export default function Home() {
  const [selectedValue, setSelectedValue] = useState(loginList[0].name)
  const router = useRouter()

  const handleWeChatLogin = () => {
    const selectItem = loginList.find((item) => item.name === selectedValue)
    if (selectItem) {
      window.location.href = selectItem.url
    }
  }

  const handleLogin = () => {
    const newToken = prompt('请输入 token')
    if (newToken) {
      useAuthStore.getState().setAuth(newToken, null)
      router.push('/movie')
    }
  }
  return (
    <main className="h-full -translate-y-[10vh] flex flex-col items-center justify-center p-8">
      <Suspense fallback={null}>
        <SearchParamsHandler />
      </Suspense>

      {isDev && (
        <Button variant="outline" onClick={handleLogin}>
          手动登录
        </Button>
      )}

      {/* Logo */}
      <div className="mb-16">
        <Image
          src="/img/vertu-logo.png"
          alt="Vertu Logo"
          className="w-[200px] h-auto"
          width={200}
          height={50}
          priority
        />
      </div>

      {/* 主要内容 */}
      <div className="w-full max-w-md space-y-8">
        <h1 className="text-2xl text-center">欢迎来到vertu工具站，请选择你的身份</h1>

        {/* 选择器 */}
        <div className="flex items-center justify-between mb-8">
          <div className="text-center pr-2">选择企业微信</div>
          <div className="flex-1">
            <Select onValueChange={setSelectedValue} value={selectedValue}>
              <SelectTrigger className="w-full" style={{ boxShadow: 'none' }}>
                <SelectValue placeholder="选择登录方式" />
              </SelectTrigger>
              <SelectContent>
                {loginList.map((item, _key) => (
                  <SelectItem key={item.name + _key} value={item.name}>
                    {item.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* 登录按钮 */}
        <Button
          onClick={handleWeChatLogin}
          className="w-full flex items-center justify-center gap-2"
          variant="outline"
        >
          <Image src="/img/wechat.svg" alt="企业微信" width={24} height={24} />
          登录企业微信
        </Button>
      </div>
    </main>
  )
}
